<div class="container w-72">
  <ul class="ios-notifications">
    <li class="ios-notifications__item">
      <div class="mb-1 flex justify-between text-xs">
        <div>
          <i class="fab fa-weixin text-success"></i>
          <span>WeChat</span>
        </div>
        <div>1h ago</div>
      </div>
      <div class="text-sm font-bold">Houshibu</div>
      <div class="text-sm">Hachiman: CSS is an art!</div>
      <div class="more mt-1 text-xs">3 more messages</div>
    </li>
    <li class="ios-notifications__item">
      <div class="mb-1 flex justify-between text-xs">
        <div>
          <i class="fab fa-weixin text-success"></i>
          <span>WeChat</span>
        </div>
        <div>1h ago</div>
      </div>
      <div class="text-sm font-bold">Houshibu</div>
      <div class="text-sm">Yui: CSS is an art!</div>
      <div class="more mt-1 text-xs">3 more messages</div>
    </li>
    <li class="ios-notifications__item">
      <div class="mb-1 flex justify-between text-xs">
        <div>
          <i class="fab fa-weixin text-success"></i>
          <span>WeChat</span>
        </div>
        <div>1h ago</div>
      </div>
      <div class="text-sm font-bold">Hoshibu</div>
      <div class="text-sm">Yukino: CSS is an art!</div>
      <div class="more mt-1 text-xs">3 more messages</div>
    </li>
    <li class="ios-notifications__item">
      <div class="mb-1 flex justify-between text-xs">
        <div>
          <i class="fab fa-weixin text-success"></i>
          <span>WeChat</span>
        </div>
        <div>1h ago</div>
      </div>
      <div class="text-sm font-bold">Hoshibu</div>
      <div class="text-sm">Iroha: CSS is an art!</div>
      <div class="more mt-1 text-xs">3 more messages</div>
    </li>
  </ul>
</div>